<template>
  <div class="ranking-list table-theme">
    <el-card>
      <div class="ranking-title">{{ title }}产品销售排行榜</div>
      
      <div class="ranking-list-menu">
        <div class="ranking-list-menu-left">
          <div class="date-search">
            <div class="start_time">
              开始日期：
               <el-date-picker type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="start_time" style="width: 70%;" @change="init(1)"></el-date-picker>
            </div>
            <div class="end_time">
              结束日期：
              <el-date-picker type="date" placeholder="选择结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="end_time" style="width: 70%;" @change="init(1)"></el-date-picker>
            </div>
            <search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
          </div>
          <div class="type-view">
            <div
              class="client-item"
              v-for="(item, index) in timeList"
              @click="timeSelect(item.value, item.label)"
              :key="index"
              :class="[time == item.value ? 'client-item-active' : '']"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
        <div class="ranking-list-menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
        </div>
      </div>
      <ul class="ranking-server-list">
        <li v-for="item in serverList" :key="item.factory_server_id">
          <p>
            <span>id：</span>
            <span class="name">{{item.factory_server_id}}</span>
          </p>
          <p>
            <span>跟单员：</span>
            <span class="name">{{item.server_name}}</span>
          </p>
          <p>
            <span>金额：</span>
            <span class="price">￥{{item.price}}元</span>
          </p>
        </li>
        <li>
          <p>
            <span>数据总数：</span>
            <span class="name">{{ total }}</span>
          </p>
          <p>
            <span>总金额：</span>
            <span class="price">{{ allPrice }}元</span>
          </p>
          <p>
            <span>已选总金额：</span>
            <span class="price">{{ sumPrice }}元</span>
          </p>
        </li>
      </ul>
      
      <el-table :data="list" @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"
            prop="checkbox"
            >
          </el-table-column>
        <el-table-column label="排名" align="center" prop="">
          <template slot-scope="scope">
            <el-tag>{{ scope.$index + 1 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="品牌id"
          align="center"
          prop="factory_id"
        ></el-table-column>
        <el-table-column
          label="品牌名称"
          align="center"
          prop="factory_name"
        ></el-table-column>
        <el-table-column
          label="系列"
          align="center"
          prop="factory_style_sn"
        ></el-table-column>
        <el-table-column
          label="工厂编号"
          align="center"
          prop="factory_sn"
        ></el-table-column>
        <el-table-column
          label="公司名称"
          align="center"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="累计销量"
          align="center"
        >
        <template slot-scope="scope">
           {{scope.row.count}}&nbsp;件
        </template>
        </el-table-column>
        <el-table-column
          label="金额"
          align="center"
        >
        <template slot-scope="scope">
          {{scope.row.price}}&nbsp;元
        </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :page-size="30"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeList: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: "today",
          label: "本日",
        },
        {
          value: "yesterday",
          label: "昨日",
        },
        {
          value: "week",
          label: "本周",
        },
        {
          value: "lastWeek",
          label: "上周",
        },
        {
          value: "month",
          label: "本月",
        },
        {
          value: "lastMonth",
          label: "上个月",
        },
        {
          value: "year",
          label: "今年",
        },
        {
          value: "lastYear",
          label: "上一年",
        },
      ],
      title: "全部",
      total: 0,
      page: 0,
      time: 0,
      start_time:"",
      end_time:"",
      admin_type: localStorage.getItem("admin_type"),
      list: [],
      sumPrice:0,
      allPrice:0,
      serverList:[],
      factory_id: '',
      factory_sn: '',
      searchOption: [
        {
          value: 0,
          label: "工厂ID",
        },
        {
          value: 1,
          label: "工厂编号",
        },
      ],
    };
  },
  methods: {
    init(e) {
      this.page = e;
      this.sumPrice = 0;
      let data = {
        limit: 30,
        page: e - 1 ? e - 1 : 0,
        time: this.time == 0 ? "" : this.time,
        start_time:this.start_time,
        end_time:this.end_time,
        factory_id: this.factory_id,
        factory_sn: this.factory_sn,
      };
      this.$http(this.$ApiList.FactoryRank, data).then((res) => {
        const { count, datas, all_price, server } = res;
        this.total = count;
        this.allPrice = all_price;
        this.serverList = server;
        this.list = datas.map(item=>{
          let obj = {
            ...item,
            checkbox:false
          }
          return obj
        }) 
      });
    },
    // 刷新
    refreshPage() {
      this.page = 1;
      this.sumPrice = 0;
      this.start_time = '';
      this.end_time = '';
      this.factory_id = ''
      this.factory_sn = ''
      this.init();
    },
    timeSelect(time, title) {
      this.time = time;
      this.title = title;
      this.init();
    },
    handleSelectionChange(arr){
      let price = 0;
      if(arr.length){
        arr.map(item=>{
          price += Number(item.price);
        })
        this.sumPrice = price
      }else{
        this.sumPrice = price
      }
    },
    goSearch(index, content) {
      this.factory_id = ''
      this.factory_sn = ''
      switch (index){
        case 0:
          this.factory_id = content
          break;
        case 1:
          this.factory_sn = content
          break;
      }
      this.init();
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.ranking-list {
  .data-filtering-left {
    display: flex;
  }

  .ranking-title {
    font-size: 26px;
    font-weight: bold;
  }

  .ranking-list-menu {
    display: flex;

    .ranking-list-menu-left {
      // display: flex;
      display: block;
      line-height: 40px;

      .type-view {
        display: flex;
      }
      .date-search{
        padding: 20px 0;
        display: flex;
      }
      .date-search .start_time,
      .date-search .end_time{
        margin-right: 20px;
        width: 340px;
      }
      .type-view .client-item {
        margin-right: 40px;
        line-height: 40px;
        color: rgba(153, 153, 153, 1);
        cursor: pointer;
      }

      .client-item-active {
        color: #333333 !important;
        border-bottom: 4px solid #34a1e0;
      }
    }

    .ranking-list-menu-right {
      flex: 1;
      display: flex;
      flex-direction: row-reverse;
    }
  }
  .ranking-server-list{
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    li{
      width: calc((100% - 80px)/5);
      height: 96px;
      margin-right: 20px;
      border: 1px solid #eee;
      padding: 10px;
      border-radius: 10px;
      background-color: #f9f9f9;
      &:nth-child(4n){
        margin-right: 0;
      }
      p{
        white-space: nowrap;
        overflow: hidden;
        // text-overflow: ellipsis;
        span{
        display: inline-block;
        &:first-child{
          width: 84px;
          text-align: right;
          margin-right: 8px;
          color: #141414;
        }
      }
      }
     .price{
       color: #e3535a;
       font-size: 16px;
       font-family: MicrosoftYaHei;
       font-weight: 600;
     } 
     .name{
       font-size: 16px;
       font-family: MicrosoftYaHei;
       color: #141414;
     }
    }
  }
}
</style>